import { HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";

function Tag(props: HTMLAttributes<HTMLDivElement>) {
    const { className, children, ...otherProps } = props;

    return (
        <div className={twMerge('px-3 py-1 text-lime-400 uppercase inline-flex items-center gap-2 border border-lime-400 rounded-full', className)} {...otherProps}>
            <span>&#10038;</span>
            <span className="text-sm">{children}</span>
        </div>
    );
}

export default Tag;